<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<select id="sellevel0" class="sel1"></select>
<select id="sellevel1" class="sel1"><option value="">请选择</option></select>
<select id="sellevel2" class="sel1"><option value="">请选择</option></select>
<input type="hidden" name="fProvinceId" value="${oprt=='edit' ? (bean.fProvinceId) : ''}" class="required" />
<input type="hidden" name="fCityId" value="${oprt=='edit' ? (bean.fCityId) : ''}" class="required"/>
<input type="hidden" name="fAreaId" value="${oprt=='edit' ? (bean.fAreaId) : ''}" class="required"/>
<script type="text/javascript">
    $(function () {
        $.getJSON("/area/findby1.jspx", function (data) {
            $("#sellevel0").empty();
            $.each(data, function (index, element) {
                var option = "<option value='" + element.id + "'>" + element.name + "</option>";
                $("#sellevel0").append(option);
            })
        });

        $("#sellevel0").change(function () {
            var current = $(this).find("option:selected").val();
            $("input[name='fProvinceId']").val(current);
            $.getJSON("/area/findby" + current + ".jspx", function (data) {
                $("#sellevel1").empty();
                $.each(data, function (index, element) {
                    var option = "<option value='" + element.id + "'>" + element.name + "</option>";
                    $("#sellevel1").append(option);
                })
            });
        });

        $("#sellevel1").change(function () {
            var current = $(this).find("option:selected").val();
            $("input[name='fCityId']").val(current);
            $.getJSON("/area/findby" + current + ".jspx", function (data) {
                $("#sellevel2").empty();
                $.each(data, function (index, element) {
                    var option = "<option value='" + element.id + "'>" + element.name + "</option>";
                    $("#sellevel2").append(option);
                })
            });
        });

        $("#sellevel2").change(function () {
            var current = $(this).find("option:selected").val();
            $("input[name='fAreaId']").val(current);
        });

        var provinceId = $("input[name='fProvinceId']").val();
        var cityId = $("input[name='fCityId']").val();
        var areaId = $("input[name='fAreaId']").val();

        if (provinceId != "" && cityId != "" && areaId != "") {
            initArea(provinceId, cityId, areaId);
        }
    });

    function initArea(provinceId,cityId,areaId){
        $("#sellevel0").empty();
        $("#sellevel1").empty();
        $("#sellevel2").empty();

        $("input[name='fProvinceId']").val(provinceId);
        $("input[name='fCityId']").val(cityId);
        $("input[name='fAreaId']").val(areaId);

        var getOption = function(element,id){
            if (element.id == id) {
                return "<option value='" + element.id + "' selected='selected'>" + element.name + "</option>";
            } else {
                return "<option value='" + element.id + "'>" + element.name + "</option>";
            }
        }

        $.getJSON("/area/findby1.jspx", function (data) {
            $.each(data, function (index, element) {
                $("#sellevel0").append(getOption(element,provinceId));
            })
        });

        $.getJSON("/area/findby" + provinceId + ".jspx", function (data) {
            $.each(data, function (index, element) {
                $("#sellevel1").append(getOption(element,cityId));
            })
        });

        $.getJSON("/area/findby" + cityId + ".jspx", function (data) {
            $.each(data, function (index, element) {
                $("#sellevel2").append(getOption(element,areaId));
            })
        });

    }
</script>